<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缪斯仪表板悬浮横幅</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <!--
        模仿网址：https://demos.creative-tim.com/muse-vue-ant-design-dashboard/?_ga=2.112221191.267815549.1690247889-772037456.1690247889#/sign-up
    -->
    <div id="ofBar">
        <div id="ofBar-logo">
            <img alt="创意时间徽标" src="./img/logo-ct-black.png">
        </div>
        <div id="ofBar-content">🎉🎉 加入创意蒂姆的庆祝活动！
            <b>10周年纪念礼包</b>来了<b>，非常感谢您的</b>支持 ⏰ 还剩3天
        </div>
        <div id="ofBar-right">
            <a href="https://www.creative-tim.com/campaign?ref=ct-demos" target="_blank" id="btn-bar">查看优惠</a>
            <a id="close-bar">×</a>
        </div>
    </div>
    <div class="tomato height"></div>
    <div class="bisque height"></div>
    <div class="slateblue height"></div>
    <div class="tomato height"></div>
    <div class="bisque height"></div>
    <div class="slateblue height"></div>
    <div class="tomato height"></div>
    <div class="bisque height"></div>
    <div class="slateblue height"></div>
    <style>
        .height {
            height: 300px;

        }

        .tomato {
            background-color: tomato;
        }

        .bisque {
            background-color: bisque;
        }

        .slateblue {
            background-color: slateblue;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>

</body>

</html>